<!--html页面-->
<template>
    <div>
        <h2>一辆{{ car.brand }}车价值{{ car.price }}元</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <button @click="changeBrand">修改汽车的品牌</button>
        <button @click="changeCar">修改汽车</button>
        <br/>
        <h2>游戏列表</h2>
        <ul>
            <li v-for="g in games" v-bind:key="g.id">{{ g.name }}</li>
        </ul>
        <button @click="changeGameName">修改第一个游戏的名字</button>
        <hr>
        <h2>测试：{{ obj.a.b.c }}</h2>
        <button @click="changeObj">更改测试数据</button>
    </div>

</template>
<!--js或ts---->
<script setup lang="ts" name="Car">
import { idText } from 'typescript';
import { ref,reactive } from  'vue';//引入响应式
//数据

let car =reactive({brand:'奔驰',price:1000}) //用{}包裹的是原对象
//用reactive（）包裹起来的是响应式对象 只能用于引用数据类型
//ref（）包裹起来的是响应式数据  可用于基本数据类型也可用于引用数据类型 

//响应式数组
let games = reactive([
    {id:'01',name:'王者荣耀'},
    {id:'02',name:'英雄联盟'},
    {id:'03',name:'和平精英'}
]) 

//一个对象包裹着多个对象
let obj =reactive({
    a:{
        b:{
            c:666
        }
    }
}) 
//方法
//细节：reactive（）包裹的响应式引用类型要是修改一整个对象是，不能响应
// function changeCar(){
//     car = {brand:'保时捷',price:100000}
// }例如上面代码不能生效，不能将一整个car对象整体替换成新的对象
//但是用ref（）包裹的响应式引用类型是可以的
//function changeCar(){
//     car.value = {brand:'保时捷',price:100000}
// }这样是可以的

//要想修改对象，只能用Objece.assign(obj1,{obj2,obj3,...})方法  
//obj1:要修改的对象  obj2，obj3,...:修改对象的属性
function changeCar(){
    Object.assign(car,{brand:'保时捷',price:100000})
}

function changeBrand(){
    car.brand = '兰博基尼'
}
function changePrice(){
    car.price +=10
}
//或者用ref响应引用类型
// function changePrice(){
//     car.value.price +=10
// }
// function changeGameName(){
//     games.value[0].name = '元神'
// }
function changeGameName(){
    games[0].name = '元神'
}
function changeObj(){
    obj.a.b.c += 1
}
</script>
/**
使用原则：
若需要一个基本类型的响应式数据,必须使用ref
若需要一个响应式对象,层级不深,可以用ref也可用reactive
若需要一个响应式对象,层级很深,必须使用reactive
*/
<!--css---->
<style>
</style>